<template>
	<view v-if="isShow">
		<!-- 支付 -->
		<view class="zezhao888" @click="clickclose"></view>
		<view class="paydiv">
			<view class="top">
				<view class="dopaytext"></view>
				<view class="dopaytext">支付</view>
				<image src="/static/icon/sku_close.png" class="closecha" @click="clickclose"></image>
			</view>
			<!-- <view class="orderprice">
				¥
				<text>888</text>
			</view> -->
			<view class="paylist">
				<view class="payobj" v-for="(item, index) in payList" :key="index" @click="dopayselect(index)">
					<image :src="item.paylogo" class="paylogo"></image>
					<view class="paytext">
						<view class="text1">
							{{ item.name }}
							<text v-if="item.tuijian">{{ item.tuijian }}</text>
						</view>
						<view class="text2" v-if="item.dec">{{ item.dec }}</view>
					</view>
					<image class="gouxuan" src="/static/payorder/pay/06.png" v-if="payindex == index"></image>
					<image class="gouxuan" src="/static/payorder/pay/07.png" v-else></image>
				</view>
				<!-- <view class="dopyabtn" @click="createPay">立即付款</view> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		color: {
			type: String,
			default: () => {
				return '#d81e06';
			}
		},
		isShow: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		payList: {
			type: Array,
			default: () => {
				return [];
			}
		},
		payindex: {
			type: Number,
			default: () => {
				return 0;
			}
		}
	},
	data() {
		return {};
	},
	mounted() {},
	methods: {
		//点击栏目
		dopayselect(index) {
			this.$emit('dopayselect', index);
		},
		clickclose(){
			this.$emit("clickclosePay")
		},
	}
};
</script>

<style lang="scss" scoped>
    .paydiv{
		width: 100%;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		border-radius: 20rpx 20rpx 0 0;
		.top{
			padding: 0 28rpx;
			height: 90rpx;
			line-height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid rgba(245,245,245,1);
			.dopaytext{
				text-align: center;
				font-size: 32rpx;
				font-weight: 800;
			}
			.closecha{
				width: 38rpx;
				height: 38rpx;
			}
		}
		.orderprice{
			text-align: center;
			font-size: 35rpx;
			font-weight: bold;
			height: 138rpx;
			color: #000000;
			line-height: 168rpx;
			text{
				font-size: 58rpx;
			}
		}
		.paylist{
			padding: 28rpx;
			.payobj{
				height: 128rpx;
				border-bottom: 1px solid rgba(245,245,245,1);
				display: flex;
				align-items: center;
				align-content: center;
				.paylogo{
					width: 58rpx;
					height: 58rpx;
				}
				.paytext{
					margin-left: 18rpx;
					.text1{
						font-size: 32rpx;
						font-weight: bold;
						display: flex;
						align-items: center;
						align-content: center;
						text{
							padding: 3rpx 8rpx;
							border: 1px solid #fc3f78;
							font-size: 20rpx;
							font-weight: normal;
							border-radius: 8rpx;
							margin-left: 8rpx;
							color: #fc3f78;
						}
					}
					.text2{
						font-size: 25rpx;
						color: #999999;
					}
				}
				.gouxuan{
					margin-left: auto;
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		.dopyabtn{
			width: 90%;
			margin: 58rpx auto 28rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 30rpx;
			background-color: #fc3f78;
			color: #ffffff;
			border-radius:50rpx;
		}
	}
</style>
